<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片卡片列表</title>
	</head>
	<style>
		.image-main{
			/**
			 * 水平布局
			 */
			display: flex;
			/*水平布局自动换行*/
			flex-wrap: wrap;
		}
		.img-card{
			width: 100%;
			height: 100%;
			/*图片完全填充*/
			 object-fit: cover;
			 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			 border-radius: 10px;
		}
		.text-overlay {
		  white-space: nowrap; /* 文本不换行 */	
		  overflow: hidden; /* 溢出内容隐藏 */
		  position: absolute;
		  width: 100%;
		  /* 这种技术通常结合绝对定位和定位父元素来实现居中效果 */
		  transform: translate(0, -110%); 
		  color: #fff;
		  font-size: 16px;
		  background-color: rgba(0, 0, 0, 0.5);
		  padding-top: 10px;
		  padding-bottom: 10px;
		  border-bottom-right-radius: 10px;
		  border-bottom-left-radius: 10px;
		  display: flex;
		  justify-content: center;
		}
		
		.image-container {
		  width: 310px;
		  height: 150px;
		  margin: 10px;
		  box-sizing: border-box;
		  position: relative;
		  display: inline-block;
		  transition: transform 0.3s ease;
		}
		
		.image-container:hover {
		  transform: translateY(-10px);
		}
		
	</style>
	<body>
		<div class="image-main">
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			
			
			<div class="image-container">
				<img src="../img/background-2.jpg" class="img-card" />
				<div class="text-overlay">
					<a class="text">
						这是要添加的文字
					</a>
				</div>
			</div>
			
		</div>
	</body>
</html>